/**
 * 1.需求: canvas背景
 */

//调用
CanvasParticle({
    vx: 4, //小球x轴速度,正为右，负为左
    vy: 4, //小球y轴速度
    height: 2, //小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 150, //点个数
    color: "#c6c6c6", //点颜色
    stroke: "#ddd", //线条颜色
    dist: 6000, //点吸附距离
    e_dist: 20000, //鼠标吸附加速距离
    max_conn: 10 //点到点最大连接数
});

/**
 * 2. 模拟数据
 */
// 价格模拟服务器的数据

let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

/**
 * 3.需求: 遍历data,组装成HTML代码,渲染到price-ul中
 */
let priceUl = document.querySelector('.price-ul')


// 保存组装好的HTML代码
let dataHtml = ''
data.forEach(function(v, i) {
        // 组装数据
        // 自定义属性要加data-属性名
        dataHtml += `
    <li class="price-li fl ${i===0 ? 'selected' : ''}" data-price="${v.price}" data-unit-price="${v.unitPrice}">${v.count}次</li>
    `
    })
    // 这里用+=,因为priceUl还有其他HTML元素
priceUl.innerHTML += dataHtml


/* 4.需求：事件委派点击price-li，price,unitPrice值变化 */
let price = document.querySelector('.price')
let unitPrice = document.querySelector('.unit-price')



priceUl.addEventListener('click', function(e) {

    let bool = e.target.classList.contains('price-li')
        // && e.target.classList != 'qrcode';
        // 如果事件源类名列表包含price-li类名
        // console.log(e.target.classList.contains('price-li'));
        // console.log(e.target.className);
        // console.log(bool);
    if (bool) {
        // 清除其他标签的激活样式
        // 这里用不了forEach,就用for,从priceUl的第二个li开始遍历
        // 索引小于priceUl子元素的长度减1,因为不获取第一个li
        // 不然会报错，无法读取最后一个li的classList
        // Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
        for (let i = 1; i <= priceUl.children.length - 1; i++) {
            // priceUl所有索引的子元素,类名列表里移除指定类名
            priceUl.children[i].classList.remove('selected')
                // console.log(priceUl.children[i].className);
                // priceUl.children[i].className = ''
                // console.log(1);
                // console.log(priceUl.children[i].classList);
        }
        e.target.classList.add('selected')


        // 设置价格
        // 读取自定义属性方法：元素节点对象.dataset.属性名
        price.textContent = e.target.dataset.price

        // 设置单价
        unitPrice.textContent = e.target.dataset.unitPrice
    }
})


/* 需求5.点击(tab-top li)为当前菜单添加激活样式
 *显示当前菜单对应内容(con-item div)
 */


tabCard('.tab-ul li', '.tabcon .tabcon-item')